import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:macnov/stores/wallet.dart';
import 'package:macnov/utils/colorUtil.dart';
import 'package:macnov/utils/dateutil.dart';
import 'package:macnov/utils/stringUtil.dart';

class PhysicalCard extends StatefulWidget {
  @override
  _PhysicalCardState createState() => _PhysicalCardState();
}

class _PhysicalCardState extends State<PhysicalCard> {
  @override
  Widget build(BuildContext context) {
    return Card(
      color: ColorsUtil.hexColor(0xFAFAFA),
      shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(16.0))),
      margin: EdgeInsets.all(20),
      child: Padding(
        padding: EdgeInsets.all(20),
        child: Observer(
          builder: (_) => walletStore.physicalCard == null
              ? Container()
              : Column(
                  children: <Widget>[
                    Row(
                      children: <Widget>[
                        Image.asset(
                          'assets/wallet/wallet_physucal_card_icon_locked.png',
                          width: 70,
                        ),
                        Expanded(
                          child: Text(
                            'PHYSICAL',
                            textAlign: TextAlign.right,
                            style: TextStyle(
                                fontSize: 10,
                                color: ColorsUtil.hexColor(0x333333)),
                          ),
                        )
                      ],
                    ),
                    Container(
                      padding: EdgeInsets.only(top: 20, bottom: 20),
                      child: Text(
                        StringUtil.creditNumFormat(walletStore.physicalCard.cardId),
                        style: TextStyle(
                            fontSize: 26,
                            color: ColorsUtil.hexColor(0x333333),
                            fontWeight: FontWeight.bold),
                      ),
                    ),
                    Row(
                      children: <Widget>[
                        Row(
                          children: <Widget>[
                            Image.asset(
                              'assets/wallet/exp_date.png',
                              width: 30,
                            ),
                            Container(
                              padding: EdgeInsets.only(left: 20),
                              child: Text(
                                DateUtil.expFormat(walletStore.physicalCard.expiration),
                                style: TextStyle(
                                    fontSize: 22,
                                    color: ColorsUtil.hexColor(0x777777)),
                              ),
                            )
                          ],
                        ),
                        Expanded(
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.end,
                            children: <Widget>[
                              Text('cvc',
                                  style: TextStyle(
                                      fontSize: 12,
                                      color: ColorsUtil.hexColor(0x777777))),
                              Padding(
                                padding: EdgeInsets.only(left: 10),
                                child: Text(
                                  walletStore.physicalCard.cvc,
                                  textAlign: TextAlign.right,
                                  style: TextStyle(
                                      fontSize: 18,
                                      color: ColorsUtil.hexColor(0x777777)),
                                ),
                              )
                            ],
                          ),
                        ),
                      ],
                    ),
                    Container(
                        padding: EdgeInsets.only(top: 15),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: <Widget>[
                            Container(
                              child: Text(
                                walletStore.physicalCard.cardHolder,
                                style: TextStyle(
                                    fontSize: 16,
                                    color: ColorsUtil.hexColor(0x323232)),
                              ),
                            ),
                            Image.asset(
                              'assets/wallet/wallet_physucal_card_mastercard.png',
                              height: 40,
                            ),
                          ],
                        )),
                  ],
                ),
        ),
      ),
    );
  }
}
